<script setup>
/**
 * 条件渲染
 */
import { ref } from 'vue'
const awesome = ref(true)

const type = ref("A")
</script>

<template>
<button @click="awesome = !awesome">Toggle</button>
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>


<hr>
<button @click="type = 'A'">Toggle A</button>
<button @click="type = 'B'">Toggle B</button>
<button @click="type = 'C'">Toggle C</button>
<button @click="type = 'D'">Toggle D</button>

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>


</template>

<style scoped>

</style>